<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <image class="header-img" src="@/img/00主页03_slices/图层 3.png"></image>
      <text class="header-title">{{merchant.name}}，欢迎您</text>
    </view>

    <!-- 核销操作区域 -->
    <view class="核销-wrap">
      <view class="核销-item" @click="handleScan">
        <image class="核销-icon" src="@/img/00主页03_slices/扫码.png"></image>
        <text class="核销-text">扫码核销</text>
      </view>
      <view class="核销-item" @click="handleInputCode">
        <image class="核销-icon" src="@/img/00主页03_slices/输入2.png"></image>
        <text class="核销-text">输入核销码</text>
      </view>
    </view>

    <!-- 功能按钮区域 -->
    <view class="func-btn-wrap">
      <view 
        class="func-btn" 
        v-for="(item, index) in funcList" 
        :key="index" 
        @click="handleFunc(item)" 
      >
        <!-- 圆形按钮（仅图标） -->
        <view class="func-btn-circle" :style="{ backgroundColor: bgColors[index] }">
          <image class="func-icon" :src="item.icon"></image>
        </view>
        <!-- 文字在按钮外部下方 -->
        <text class="func-text">{{item.text}}</text>
      </view>
    </view>

    <!-- 最新通知区域 -->
    <view class="notice-wrap">
      <view class="notice-top">
        <image src="/static/00主页03_slices/消息-信息@2x.png" class="message-image"></image>
        <text class="notice-title">最新通知</text>
        <text class="notice-subtitle">今日需上门取车任务共32单</text>
      </view>
      <view class="notice-table">
        <view class="table-header">
          <text class="table-header-text">用户</text>
          <text class="table-header-text">服务项目</text>
          <text class="table-header-text">时间</text>
        </view>
        <view class="table-row" v-for="(row, rowIndex) in noticeList" :key="rowIndex">
          <text class="table-row-text">{{row.user}}</text>
          <text class="table-row-text">{{row.service}}</text>
          <text class="table-row-text">{{row.time}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {
			get,
			post,
			put
		} from '../../utils/request.js'
export default {
  data() {
    return {
		merchant:{},
		verification:{},
      funcList: [
        { icon: "/static/00主页03_slices/统计.png", text: "经营统计" },
        { icon: "/static/00主页03_slices/核销记录 (1).png", text: "核销记录" },
        { icon: "/static/00主页03_slices/123收支明细.png", text: "收支明细" }, 
        { icon: "/static/00主页03_slices/订单管理.png", text: "订单管理" },   
        { icon: "/static/00主页03_slices/卡券.png", text: "卡券管理" },      
        { icon: "/static/00主页03_slices/维修.png", text: "维修任务" },
        { icon: "/static/00主页03_slices/评价管理.png", text: "评价管理" },
        { icon: "/static/00主页03_slices/资料库.png", text: "商户资料" },
        { icon: "/static/00主页03_slices/活动.png", text: "活动发布" }
      ],
      bgColors: [
        "#FFD700", "#00FFFF", "#FF69B4", "#32CD32", 
        "#FFA500", "#87CEEB", "#9370DB", "#FFC0CB", 
        "#00FF7F"
      ],
      noticeList: [
        { user: "张先生", service: "汽车美容、基础保养", time: "2022-03-10 11:09" },
        { user: "张先生", service: "汽车精细", time: "2022-03-10 11:09" },
        { user: "张先生", service: "车辆维修-上门取车", time: "2022-03-10 11:09" },
        { user: "张先生", service: "汽车美容、基础保养", time: "2022-03-10 11:09" },
        { user: "张先生", service: "车辆维修-到店维修", time: "2022-03-10 11:09" }
      ]
    };
  },
  methods: {
    handleScan() {
      uni.showToast({ title: "扫码核销功能待实现", icon: "none" });
    },
    handleInputCode() {
      uni.showToast({ title: "输入核销码功能待实现", icon: "none" });
	  uni.navigateTo({
	  	url:"/pages/verifyCode/verifyCode"
	  })
    },
    handleFunc(item) {
      uni.showToast({ title: `点击了${item.text}`, icon: "none" });
	  if(item.text=="收支明细"){
		  uni.navigateTo({
		  	url:"/pages/incomeExpenseDetails/incomeExpenseDetails"
		  })
	  }
	  if(item.text=="商户资料"){
	  		  uni.navigateTo({
	  		  	url:"/pages/MerchantsInfo/MerchantsInfo"
	  		  })
	  }
	  if(item.text=="订单管理"){
	  		  uni.navigateTo({
	  		  	url:"/pages/OrderManagement/OrderManagement"
	  		  })
	  }
	  if(item.text=="维修任务"){
	  		  uni.navigateTo({
	  		  	url:"/pages/MaintenanceTasks/MaintenanceTasks"
	  		  })
	  }
	  if(item.text=="经营统计"){
	  		  uni.navigateTo({
	  		  	url:"/pages/businessStatistics/businessStatistics"
	  		  })
	  }
	  if(item.text=="卡券管理"){
	  		  uni.navigateTo({
	  		  	url:"/pages/CardManagement/CardManagement"
	  		  })
	  }
	  if(item.text=="评价管理"){
	  		  uni.navigateTo({
	  		  	url:"/pages/EvaluationManagement/EvaluationManagement"
	  		  })
	  }
	  if(item.text=="活动发布"){
	  		  uni.navigateTo({
	  		  	url:"/pages/EventActivity/EventActivity"
	  		  })
	  }
	  if(item.text=="核销记录"){
	  		  uni.navigateTo({
	  		  	url:"/pages/verificationRecords/verificationRecords"
	  		  })
	  }
    }
  },
  async onLoad() {
  	this.verification =uni.getStorageSync('verification')
	this.merchant=uni.getStorageSync('merchant')
	// const res=await get('/dev-api/system/merchant/' + a.mid, {})
	// uni.setStorageSync('merchant',res.data)
	// console.log(uni.getStorageSync('verification'))
	// console.log(uni.getStorageSync('merchant'))
  }
	
};
</script>

<style scoped>
/* 页面整体 */
.container {
  background-color: #f5f5f5;
}
/* 头部 */
.header {
  display: flex;
  align-items: center;
  background-color: #3399ff;
  color: #fff;
  padding: 15px;
  height: 200rpx;
  z-index: 1;
}
.header-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: -70rpx;
}
.header-title {
  font-size: 18px;
  margin-top: -70rpx;
}
/* 核销操作 */
.核销-wrap {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  margin: -80rpx 20rpx 10rpx 20rpx;
  border-radius: 8px;
  padding: 25px 0 0 0;
  z-index: 2;
  height: 150rpx;
}
.核销-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.核销-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}
.核销-text {
  font-size: 14px;
}
/* 功能按钮区域（核心修改） */
.func-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: #fff;
  border-radius: 8px;
  padding: 20rpx;
  width: calc(100% - 40rpx); 
  margin: 20rpx 3%;
  box-sizing: border-box;
  width: 94%;
}
.func-btn {
  width: 25%; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  margin-bottom: 0rpx; 
  box-sizing: border-box;
  padding: 10rpx;
}
/* 圆形按钮样式 */
.func-btn-circle {
  width: 120rpx; 
  height: 120rpx; 
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center; 
  border: 1px solid #eee; 
}
.func-icon {
  width: 60rpx;
  height: 60rpx;
}
/* 文字在按钮外部下方 */
.func-text {
  font-size: 14px;
  text-align: center;
  white-space: nowrap; 
  margin-top: 10rpx; 
}
/* 最新通知 */
.notice-wrap {
  background-color: #fff;
  margin: 20rpx 20rpx;
  border-radius: 8px;
  padding: 10px;
}
.notice-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.notice-title {
  font-size: 16px;
  font-weight: bold;
}
.notice-subtitle {
  color: #ff5722;
  font-size: 14px;
}
.table-header {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
  font-weight: bold;
}
.table-header-text,
.table-row-text {
  width: 33.33%;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  border: 1px solid #eee;
}
.table-row {
  display: flex;
  justify-content: space-between;
}
.message-image{
  width: 40rpx;
  height: 40rpx;
  margin-right: -140rpx;
}
</style>